<template>
    <div>
        <Header></Header>
        <el-row style="margin-top: 200px">
            <el-col :span="9" :offset="7">
                <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px">
                    <el-form-item>
                        <i class="el-icon-edit" @click="edit()" style="cursor: pointer"> {{$t('userInfo.edit')}} </i>
                    </el-form-item>

                    <el-form-item :label="$t('userInfo.mail')" prop="userName" label-width="120px">
                        <el-input :placeholder="$t('userInfo.mail')" v-model="addForm.userName" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('userInfo.companyName')" prop="companyName" label-width="120px">
                        <el-input :placeholder="$t('userInfo.companyName')" v-model="addForm.companyName" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('userInfo.name')" prop="realName" label-width="120px">
                        <el-input :placeholder="$t('userInfo.name')" v-model="addForm.realName" :disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('userInfo.password')" prop="password" label-width="120px">
                        <el-input :placeholder="$t('userInfo.password')" v-model="addForm.password" :disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('userInfo.phone')" prop="mobilephoneNumber" label-width="120px">
                        <el-input :placeholder="$t('userInfo.phone')" v-model="addForm.mobilephoneNumber" class="linkAddress" :disabled="disabled"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button v-show="!disabled" @click="editUser()">{{$t('standard.confirm')}}</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
    import Header from '../Header.vue'

    export default {
        components: {
            Header
        },
        data() {
            return {
                isShow: false,
                user: '',
                addForm: {
                    userName: '',
                    realName: '',
                    password: '',
                    companyName: '',
                    mobilephoneNumber: ''
                },
                /*  company: '',
                 trueName: '',
                 jobTitle: '',
                 mobile: '',
                 address: '',*/
                disabled: true,
                addRules: {
                    password: [
                        {min: 6, message: this.$t('message.length6-16'), trigger: 'blur'},
                        {max: 16, message: this.$t('message.length6-16'), trigger: 'blur'}
                    ],
                    realName: [
                        {max: 20, message: this.$t('message.length20'), trigger: 'blur'}
                    ],
                    mobilephoneNumber: [
                        {max: 20, message: this.$t('message.length20'), trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            this.user = JSON.parse(localStorage.getItem('userInfo'));
            if (!this.user) {
                this.$router.push({
                    path: '/login'
                })
            }
            this.addForm.userName = this.user.username;
            this.addForm.realName = this.user.realName;
            //this.password = this.user.password;
            if (this.user.companyId == -99) {
                this.addForm.companyName = this.$t('userInfo.admin');
            } else {
                this.addForm.companyName = this.user.companyName;
            }
            this.addForm.mobilephoneNumber = this.user.mobilephoneNumber;
            console.log(this.user.mobilephoneNumber)
        },
        methods: {
            closeModify() {
                this.$confirm(this.$t('message.giveUpModify'))
                    .then(_ => {
                        this.addForm.userName = this.user.username;
                        this.addForm.realName = this.user.realName;
                        this.addForm.password = '';
                        this.addForm.mobilephoneNumber = this.user.mobilephoneNumber;
                        this.disabled = !this.disabled;
                    })
                    .catch(_ => {
                    });
            },
            edit() {
                if (this.disabled) {
                    this.disabled = !this.disabled;
                } else {
                    this.closeModify();
                }
            },
            editUser() {
                this.$refs['addForm'].validate((valid) => {
                    if (valid) {
                        var userdata = {
                            "id": this.user.id,
                            "userName": this.addForm.userName,
                            "realName": this.addForm.realName,
                            "companyName": this.addForm.companyName,
                            "mobilephoneNumber": this.addForm.mobilephoneNumber
                        };

                        if (!!this.addForm.password) {
                            userdata["password"] = this.$getMD5(this.addForm.password);
                        }
                        this.axios.hPost("/api/users/modifyUserInfo", userdata, (resp) => {
                            if (resp.success) {
                                this.$message.success(resp.msg);
                                this.$store.dispatch('UserLogin', {
                                    username: resp.data.userName, id: resp.data.id, companyName: resp.data.companyName,
                                    companyId: resp.data.companyId, realName: resp.data.realName, mobilephoneNumber: resp.data.mobilephoneNumber
                                });
                                /*this.$router.push({
                                 path: '/home'
                                 })*/
                            } else {
                                this.$message.error(resp.msg);
                            }
                        });
                    }
                });

                //alert(this.mobilephoneNumber);
            }

        }
    }
</script>

<style scoped lang="scss">
    .el-input {
        // border-radius: 20px;
        //  border-radius: 20px;
        border: 2px solid #000000;

    }

    .el-input__inner {
        border-radius: 20px;
        border: 2px solid #000000;
    }

</style>